import React from 'react';
import { Link, useParams } from 'react-router-dom';
import { useLocalization } from '../hooks/useLocalization';
import { TOOLS } from '../constants';
import LanguageSwitcher from './LanguageSwitcher';
import { Logo } from './Logo';

const Header: React.FC = () => {
    const { t, getLocalizedPath } = useLocalization();
    const { tool: activeToolSlug } = useParams<{ tool: string }>();

    return (
        <header className="bg-white dark:bg-gray-800 shadow-md sticky top-0 z-50">
            <div className="container mx-auto px-4 sm:px-6 lg:px-8">
                <div className="flex items-center justify-between h-16">
                    <div className="flex-shrink-0">
                        <Link to={getLocalizedPath('/')} className="block" aria-label="Go to Homepage">
                            <Logo className="h-8 w-auto text-primary dark:text-primary-light" />
                        </Link>
                    </div>
                    <nav className="hidden md:flex md:space-x-8">
                        {TOOLS.map((tool) => (
                            <Link
                                key={tool.id}
                                to={getLocalizedPath(`/${tool.slug}`)}
                                className={`text-base font-medium transition-colors duration-200 ${
                                    activeToolSlug === tool.slug
                                        ? 'text-primary dark:text-primary-light border-b-2 border-primary'
                                        : 'text-gray-500 dark:text-gray-300 hover:text-primary dark:hover:text-primary-light'
                                }`}
                            >
                                {t(`tool_${tool.id}`)}
                            </Link>
                        ))}
                    </nav>
                    <div className="flex items-center">
                        <LanguageSwitcher />
                    </div>
                </div>
            </div>
        </header>
    );
};

export default Header;